import React, { useState, useEffect } from "react";
import {
  message,
  Button,
  Form,
  Radio,
  Modal,
  Input,
  Col,
  Row,
  DatePicker,
  Upload,
} from "antd";

import { PlusOutlined } from "@ant-design/icons";
const { TextArea } = Input;

const UpdataData = ({childData,callback}) => {
  const [form] = Form.useForm();
  const [childDatas,setChildDatas] = useState({})
  const [fileList, setFileList] = useState([]);
  useEffect(()=>{
    setChildDatas(childData)
    if(childData.formData){
        form.setFieldsValue(
            childData.formData
        )
    }
  },[childData])
  const closeModal = ()=>{
    setChildDatas((prevSearch) => ({
        ...prevSearch,
        isModalOpen: false
      }));
  }
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  const onFinish = (values) => {
    message.success("添加成功");
    switch (childDatas.title) {
      case "新增活动消息":
        callback({data:values,type:'add'})
        break;

      default:
        break;
    }
  };
  const onChangePic = ({ fileList: newFileList }) => {
    setFileList(newFileList);
  };
  const onPreview = async (file) => {
    let src = file.url;
    if (!src) {
      src = await new Promise((resolve) => {
        const reader = new FileReader();
        reader.readAsDataURL(file.originFileObj);
        reader.onload = () => resolve(reader.result);
      });
    }
    const image = new Image();
    image.src = src;
    const imgWindow = window.open(src);
    imgWindow?.document.write(image.outerHTML);
  };
  const props = {
    onRemove: (file) => {
      const index = fileList.indexOf(file);
      const newFileList = fileList.slice();
      newFileList.splice(index, 1);
      setFileList(newFileList);
    },
    beforeUpload: (file) => {
      setFileList([...fileList, file]);
      return false;
    },
    listType: "picture-card",
    onChange: onChangePic,
    onPreview: onPreview,
    fileList,
  };

  return (
    <div>
      <Modal
        title={childDatas.title}
        open={childDatas.isModalOpen}
        onOk={closeModal}
        onCancel={closeModal}
        footer={null}
        width={700}
      >
        <div className="content">
          <Form
            form={form}
            name="basic"
            labelCol={10}
            onFinishFailed={onFinishFailed}
            onFinish={onFinish}
            autoComplete="off"
          >
            <Row gutter={16}>
              <Col span={14}>
                <Form.Item
                  label="活动标题"
                  name="title"
                  rules={[
                    {
                      required: true,
                      message: "请输入活动标题",
                    },
                  ]}
                >
                  <Input />
                </Form.Item>
              </Col>

              <Col span={24}>
                <Form.Item
                  label="活动封面图片"
                  name="fileList"
                  rules={[
                    {
                      required: true,
                      message: "请上传活动封面图片",
                    },
                  ]}
                >
                  <Upload {...props}>
                    {fileList.length < 5 && (
                      <PlusOutlined style={{ fontSize: "50px" }} />
                    )}
                  </Upload>
                </Form.Item>
              </Col>

              <Col span={20}>
                <Form.Item
                  label="活动详情"
                  name="content"
                  rules={[
                    {
                      required: true,
                      message: "请输入活动详情",
                    },
                  ]}
                >
                  <TextArea rows={4} maxLength={6} />
                </Form.Item>
              </Col>

              <Col span={24}>
                <Form.Item
                  label="活动开始时间"
                  name="startTime"
                  style={{
                    display: "inline-block",
                  }}
                  rules={[
                    {
                      required: true,
                      message: "请选择活动开始时间",
                    },
                  ]}
                >
                  {/* <TextArea rows={4} maxLength={6} /> */}
                  <DatePicker format="YYYY-MM-DD" />
                </Form.Item>
                <Form.Item
                  label="活动结束时间"
                  name="endTime"
                  style={{
                    display: "inline-block",
                    marginLeft: "50px",
                  }}
                  rules={[
                    {
                      required: true,
                      message: "请选择活动结束时间",
                    },
                  ]}
                >
                  <DatePicker format="YYYY-MM-DD" />
                  {/* <DatePicker placeholder="" defaultValue={copyData.startTime ? dayjs(moment.utc(copyData.startTime).format("YYYY/MM/DD HH:mm:ss"), 'YYYY-MM-DD HH:mm:ss') /> */}
                </Form.Item>
              </Col>

              <Col span={20}>
                <Form.Item
                  label="活动状态"
                  name="state"
                  rules={[
                    {
                      required: true,
                      message: "请选择活动状态",
                    },
                  ]}
                >
                  <Radio.Group>
                    <Radio value={1}>启用</Radio>
                    <Radio value={0}>未启用</Radio>
                  </Radio.Group>
                </Form.Item>
              </Col>
              <Col span={24}>
                <div className="footer">
                  <Button type="primary" htmlType="submit">
                    提交
                  </Button>
                  <Button
                    htmlType="button"
                    onClick={() => {
                      form.resetFields();
                      setFileList([]);
                      closeModal()
                    }}
                  >
                    返回
                  </Button>
                </div>
              </Col>
            </Row>
          </Form>
        </div>
      </Modal>
    </div>
  );
};

export default UpdataData;
